<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微信界面生成</title>
    <link href="css/css.css" rel="stylesheet">
    <link href="./css/css.css" rel="stylesheet" type="text/css"/>
    <script src="./js/canvas.js"></script>
    <script src="./js/loadImg.js"></script>
</head>
<body>
    <section id="header">
        <img src="images/bg.jpg" width="100%" height="800px">
        <div id="headerText">
            <header>
                <h1>微信界面生成</h1>
                <p>By Airing & Noblevil</p>
            </header>
            <footer >
                <a href="#input" style="text-decoration: none;background-color:floralwhite;padding: 10px;border-radius: 5px;">开始生成你的界面吧！</a>
            </footer>
        </div>
    </section>
    <section id="input">


        <div class="message">
            <div class="myProfile" style="float: left;">我的头像
                <div id="preview1">
                    <img id="imgHead1" width="40" height="40" border=0 src="<%=request.getContextPath()%>/images/face2.jpg"/>
                </div>
                <input type="file" onChange="previewImage1(this)" />
            </div>
            <div class="hisProfile" style="margin-right: 10px;">对方的头像
                <div id="preview2" >
                    <img id="imgHead2" width="40" height="40" border=0 src="<%=request.getContextPath()%>/images/face1.jpg"/>
                </div>
                <input type="file" onChange="previewImage2(this)" />
            </div>
            <br><br>
            <label for="hisName">
                对方的名称：
                <input id="hisName" type="text" />
            </label>
          <!--  <div style="margin: 80px;padding:25px;overflow:hidden;">
                欢迎光临本项目github：
                <br>
                https://github.com/airingursb/ez
            </div>-->
        </div>
        <div class="chatRecord">
            <!-- Chat1 -->

            <div class="chat">
                <label>
                    <input id="check1" name="chat1" type="checkbox" value="1" />
                    <select id="select1">
                        <option value="我">我</option>
                        <option value="对方">对方</option>
                    </select>
                </label>

                <label for="time1" class="time">
                    <input id="time1" type="hidden" value="" />
                </label>

                <label for="cnt1">
                    内容：
                    <textarea id="cnt1" rows="2" cols="25" maxlength="35"></textarea>
                </label>

                <div class="expression" id="ex1">
                    <img id="exp11" alt="加载失败！" src="images/exp/1.png" onClick="expClicked(11)"/>
                    <img id="exp12" alt="加载失败！" src="images/exp/2.png" onClick="expClicked(12)"/>
                    <img id="exp13" alt="加载失败！" src="images/exp/3.png" onClick="expClicked(13)"/>
                    <img id="exp14" alt="加载失败！" src="images/exp/4.png" onClick="expClicked(14)"/>
                    <img id="exp15" alt="加载失败！" src="images/exp/5.png" onClick="expClicked(15)"/>
                    <img id="exp16" alt="加载失败！" src="images/exp/6.png" onClick="expClicked(16)"/>
                    <img id="exp17" alt="加载失败！" src="images/exp/7.png" onClick="expClicked(17)"/>
                    <img id="exp18" alt="加载失败！" src="images/exp/8.png" onClick="expClicked(18)"/>
                    <img id="exp19" class="imgClicked" alt="加载失败！" src="images/exp/9.png" onClick="expClicked(19)"/>
                </div>
            </div>

            <br>

            <!-- Chat2 -->
            <div class="chat">
                <label>
                    <input id="check2" name="chat2" type="checkbox" value="2" />
                    <select id="select2">
                        <option value="我">我</option>
                        <option value="对方">对方</option>
                    </select>
                </label>
                <label for="time2" class="time">
                    时间（不显示就留空）:
                    <input id="time2" type="text" value="" />
                </label>
                <label for="cnt2">
                    内容：
                    <textarea id="cnt2" rows="2" cols="25" maxlength="35"></textarea>
                </label>

                <div class="expression" id="ex2">
                    <img id="exp21" alt="加载失败！" src="images/exp/1.png" onClick="expClicked(21)"/>
                    <img id="exp22" alt="加载失败！" src="images/exp/2.png" onClick="expClicked(22)"/>
                    <img id="exp23" alt="加载失败！" src="images/exp/3.png" onClick="expClicked(23)"/>
                    <img id="exp24" alt="加载失败！" src="images/exp/4.png" onClick="expClicked(24)"/>
                    <img id="exp25" alt="加载失败！" src="images/exp/5.png" onClick="expClicked(25)"/>
                    <img id="exp26" alt="加载失败！" src="images/exp/6.png" onClick="expClicked(26)"/>
                    <img id="exp27" alt="加载失败！" src="images/exp/7.png" onClick="expClicked(27)"/>
                    <img id="exp28" alt="加载失败！" src="images/exp/8.png" onClick="expClicked(28)"/>
                    <img id="exp29" class="imgClicked" alt="加载失败！" src="images/exp/9.png" onClick="expClicked(29)"/>
                </div>
            </div>
            <br>

            <!-- Chat3 -->
            <div class="chat">
                <label>
                    <input id="check3" name="chat3" type="checkbox" value="3" />
                    <select id="select3">
                        <option value="我">我</option>
                        <option value="对方">对方</option>
                    </select>
                </label>

                <label for="time3" class="time">
                    时间（不显示就留空）:
                    <input id="time3" type="text" value="" />
                </label>
                <label for="cnt3">
                    内容：
                    <textarea id="cnt3" rows="2" cols="25" maxlength="35"></textarea>
                </label>
                <div class="expression" id="ex3">
                    <img id="exp31" alt="加载失败！" src="images/exp/1.png" onClick="expClicked(31)"/>
                    <img id="exp32" alt="加载失败！" src="images/exp/2.png" onClick="expClicked(32)"/>
                    <img id="exp33" alt="加载失败！" src="images/exp/3.png" onClick="expClicked(33)"/>
                    <img id="exp34" alt="加载失败！" src="images/exp/4.png" onClick="expClicked(34)"/>
                    <img id="exp35" alt="加载失败！" src="images/exp/5.png" onClick="expClicked(35)"/>
                    <img id="exp36" alt="加载失败！" src="images/exp/6.png" onClick="expClicked(36)"/>
                    <img id="exp37" alt="加载失败！" src="images/exp/7.png" onClick="expClicked(37)"/>
                    <img id="exp38" alt="加载失败！" src="images/exp/8.png" onClick="expClicked(38)"/>
                    <img id="exp39" class="imgClicked" alt="加载失败！" src="images/exp/9.png" onClick="expClicked(39)"/>
                </div>
            </div>
            <br>

            <!-- Chat4 -->
            <div class="chat">
                <label>
                    <input id="check4" name="chat4" type="checkbox" value="4" />
                    <select  id="select4">
                        <option value="我">我</option>
                        <option value="对方">对方</option>
                    </select>
                </label>

                <label for="time4" class="time">
                    时间（不显示就留空）:
                    <input id="time4" type="text" value="" />
                </label>
                <label for="cnt4">
                    内容：
                    <textarea id="cnt4" rows="2" cols="25" maxlength="35"></textarea>

                </label>
                <div class="expression" id="ex4">
                    <img id="exp41" alt="加载失败！" src="images/exp/1.png" onClick="expClicked(41)"/>
                    <img id="exp42" alt="加载失败！" src="images/exp/2.png" onClick="expClicked(42)"/>
                    <img id="exp43" alt="加载失败！" src="images/exp/3.png" onClick="expClicked(43)"/>
                    <img id="exp44" alt="加载失败！" src="images/exp/4.png" onClick="expClicked(44)"/>
                    <img id="exp45" alt="加载失败！" src="images/exp/5.png" onClick="expClicked(45)"/>
                    <img id="exp46" alt="加载失败！" src="images/exp/6.png" onClick="expClicked(46)"/>
                    <img id="exp47" alt="加载失败！" src="images/exp/7.png" onClick="expClicked(47)"/>
                    <img id="exp48" alt="加载失败！" src="images/exp/8.png" onClick="expClicked(48)"/>
                    <img id="exp49" class="imgClicked" alt="加载失败！" src="images/exp/9.png" onClick="expClicked(49)"/>
                </div>
            </div>

            <br>

            <!-- Chat5 -->
            <div class="chat">
                <label>
                    <input id="check5" name="chat5" type="checkbox" value="5" />
                    <select  id="select5">
                        <option value="我">我</option>
                        <option value="对方">对方</option>
                    </select>
                </label>

                <label for="time5" class="time">
                    时间（不显示就留空）:
                    <input id="time5" type="text" value="">
                </label>
                <label for="cnt5">
                    内容：
                    <textarea id="cnt5" rows="2" cols="25" maxlength="35"></textarea>
                </label>
                <div class="expression" id="ex5">
                    <img id="exp51" alt="加载失败！" src="images/exp/1.png" onClick="expClicked(51)"/>
                    <img id="exp52" alt="加载失败！" src="images/exp/2.png" onClick="expClicked(52)"/>
                    <img id="exp53" alt="加载失败！" src="images/exp/3.png" onClick="expClicked(53)"/>
                    <img id="exp54" alt="加载失败！" src="images/exp/4.png" onClick="expClicked(54)"/>
                    <img id="exp55" alt="加载失败！" src="images/exp/5.png" onClick="expClicked(55)"/>
                    <img id="exp56" alt="加载失败！" src="images/exp/6.png" onClick="expClicked(56)"/>
                    <img id="exp57" alt="加载失败！" src="images/exp/7.png" onClick="expClicked(57)"/>
                    <img id="exp58" alt="加载失败！" src="images/exp/8.png" onClick="expClicked(58)"/>
                    <img id="exp59" class="imgClicked" alt="加载失败！" src="images/exp/9.png" onClick="expClicked(59)"/>
                </div>
            </div>
            <br>

            <!-- Chat6 -->
            <div class="chat">
                <label>
                    <input id="check6" name="chat6" type="checkbox" value="6" />
                    <select id="select6">
                        <option value="我">我</option>
                        <option value="对方">对方</option>
                    </select>
                </label>

                <label for="time6" class="time">
                    时间（不显示就留空）:
                    <input id="time6" type="text" value="" />
                </label>

                <label for="cnt6">
                    内容：
                    <textarea id="cnt6" rows="2" cols="25" maxlength="35"></textarea>

                </label>
                <div class="expression"  id="ex6">
                    <img id="exp61" alt="加载失败！" src="images/exp/1.png" onClick="expClicked(61)"/>
                    <img id="exp62" alt="加载失败！" src="images/exp/2.png" onClick="expClicked(62)"/>
                    <img id="exp63" alt="加载失败！" src="images/exp/3.png" onClick="expClicked(63)"/>
                    <img id="exp64" alt="加载失败！" src="images/exp/4.png" onClick="expClicked(64)"/>
                    <img id="exp65" alt="加载失败！" src="images/exp/5.png" onClick="expClicked(65)"/>
                    <img id="exp66" alt="加载失败！" src="images/exp/6.png" onClick="expClicked(66)"/>
                    <img id="exp67" alt="加载失败！" src="images/exp/7.png" onClick="expClicked(67)"/>
                    <img id="exp68" alt="加载失败！" src="images/exp/8.png" onClick="expClicked(68)"/>
                    <img id="exp69" class="imgClicked" alt="加载失败！" src="images/exp/9.png" onClick="expClicked(69)"/>
                </div>
            </div>
            <br>

            <!-- Chat7 -->
            <label>
                <input id="check7" name="chat7" type="checkbox" value="7" />
                <select id="select7">
                    <option value="我">我</option>
                    <option value="对方">对方</option>
                </select>
            </label>

            <label for="time7" class="time">
                时间（不显示就留空）:
                <input id="time7" type="text" value="" />
            </label>

            <label for="cnt7">
                内容：
                <textarea id="cnt7" rows="2" cols="25" maxlength="35"></textarea>
            </label>
            <div class="expression" id="ex7">
                <img id="exp71" alt="加载失败！" src="images/exp/1.png" onClick="expClicked(71)"/>
                <img id="exp72" alt="加载失败！" src="images/exp/2.png" onClick="expClicked(72)"/>
                <img id="exp73" alt="加载失败！" src="images/exp/3.png" onClick="expClicked(73)"/>
                <img id="exp74" alt="加载失败！" src="images/exp/4.png" onClick="expClicked(74)"/>
                <img id="exp75" alt="加载失败！" src="images/exp/5.png" onClick="expClicked(75)"/>
                <img id="exp76" alt="加载失败！" src="images/exp/6.png" onClick="expClicked(76)"/>
                <img id="exp77" alt="加载失败！" src="images/exp/7.png" onClick="expClicked(77)"/>
                <img id="exp78" alt="加载失败！" src="images/exp/8.png" onClick="expClicked(78)"/>
                <img id="exp79" class="imgClicked" alt="加载失败！" src="images/exp/9.png" onClick="expClicked(79)"/>
            </div>

        </div>
        <div class="generate">
            <div class="parameter">
                <p style="font-size: 25px;text-align: center">几点注意：</p>
                <ol type="A">
                    <li>内容限长35个字符，建议使用汉字</li>
                    <li>内容和表情不会同时出现在对话框中，优先显示表情</li>
                    <li>概不承担法律责任</li>
                </ol>
            </div>
            <div class="Btn">
                <span class="line line-top"></span>
                <span class="line line-left"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                <input id="makeUpBtn" type="button" value="生成" onClick="putContentView(context)"/>
            </div>
            <div style="text-align: center;font-size: 20px;padding-top: 10px;text-decoration: none">
                <a  href="#canvas"  title="前往图片生产区！"  >传送门</a>
            </div>
        </div>
    </section>
    <section id="produce" style="text-align: center;">
        <div class="Photo">
            <h2 style="margin-top:20px; background:#CCCCCC;">生成图片区</h2>.
            <div class="photo">
                <canvas id="canvas">
                    该浏览器暂不支持canvas！
                </canvas>
            </div>
        </div>
    </section>
    <section id="footer">
        <div class="footer">2015©<a href="http://ursb.me">Airing</div>
    </section>

    <script>
        var canvas = document.getElementById("canvas");
        canvas.width = 375;
        canvas.height = 667;
        var context = canvas.getContext("2d");
        //putMainView(context);
    </script>
</body>
</html>
